<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .fram{
        position: relative;
        left: 70px;
        top: 50px;
        margin: -20px;
        padding: 20px;
        width: 90%;
        height: 100%;
        border: 2px rgb(58, 255, 9) solid;
    }
    .item{
        position: relative;
        left: -30px;
        top: -5px;
    }
    /* 标签1 */
    .labe1{
        position: relative;
        top: 30px;
        left: 20px;
        z-index: 2;
    }
    /* 标签2 */
    .labe2{
        position: relative;
        z-index: 4;
    }
    /* 书籍1 */
    .book1{
        position: relative;
        top: -10px;
        left: -10px;
        z-index: 1;
    }
    /* 书籍2 */
    .book2{
        position: relative;
        top: -20px;
        left: 30px;
        z-index: 0;
    }
    /* 书籍3 */
    .book3{
        position: relative;
        top: -20px;
        left: 30px;
    }
    /* 书籍1介绍 */
    .introduction1{
        position: fixed;
        top: 140px;
        left:340px;        
    }
    /* 书籍2介绍 */
    .introduction2{
        position: absolute;
        left: 90px;;
        top: 1px;
    }
    /* 书籍3介绍 */
    .introduction3{
        position: absolute;
        left: 90px;;
        top: 1px;
    }
    /* 第一本书的框架 */
    /* .fram1{
        
    } */
    /* 第二本书的大框架 */
    .fram2{
        position: fixed;
        top: 100px;
        left:800px; 
    }
    /* 第三本书的大框架 */
    .fram3{
        position: fixed;
        top: 270px;
        left: 800px;
    }
    .foot{
        text-align: center;
        position: relative;
       top: 70px; 
    }
    

</style>
<body>
    <!-- 将整个书籍展示区的框架视为一个总框架-->
    <div class="fram">
        <!-- 将第一本书的所有展示信息综合起来视为一个大的框架 -->
        <div class="fram1">
            <div class="item"><img src="image/bg_bang.gif"></div>
            <div class="labe1"><img src="image/bookNo1.gif"></div>
            <div class="book1"><img src="image/book-01.jpg"></div>
            <div class="introduction1"><img src="image/introduction1.jpg"></div>
        </div>
        <!-- 将书籍2的全部展示信息视为一个大框架 -->
        <div class="fram2">
            <div class="label2"><img src="image/bookNo2.gif"></div>
            <div class="book2">
                <img src="image/book-02.jpg">
                <div class="introduction2"><img src="image/introduction2.jpg"></div>
            </div>
        </div>
        <!-- 将书籍3的全部展示信息视为一个大框架 -->
        <div class="fram3">
                <div class="label3"><img src="image/bookNo3.gif"></div>
                <div class="book3">
                    <img src="image/book-03.jpg">
                    <div class="introduction3"><img src="image/introduction3.jpg"></div>
                </div>
        </div>
    </div>
    <div class="foot">
        <img src="image/validate.gif">
    </div>
</body>
</html>